<template>
  <div class="content-layout">
    <Snackbar/>
    <van-dropdown-menu>
      <van-dropdown-item v-model="optionType" :options="optionTypes" v-on:change="onChangeSelectType"/>
      <van-dropdown-item title="筛选" :disabled="optionType!=3" ref="item">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          v-on:confirm="selectConfirm"
          v-on:cancel="selectCancel"
        />
      </van-dropdown-item>
    </van-dropdown-menu>

    <div id="tview" class="view1"></div>

    <LodingProgress :show="showLoading"></LodingProgress>

  </div>
</template>

<script>
  import Snackbar from '@/components/Snackbar/index'
  import echarts from '@/utils/echarts.min.js'
  import {parseTime} from '@/utils/ruoyi'
  import {incomeStatistics} from "@/api/user";

  export default {
    name: "earnings",
    components: {Snackbar},
    data() {
      return {
        showLoading:false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        optionType: 1,
        optionTypes: [
          {text: '今日', value: 1},
          {text: '本月', value: 2},
          {text: '筛选年月', value: 3},
        ]
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let myChart = echarts.init(document.getElementById('tview'));
        let _this = this;
        this.showLoading = true;
        incomeStatistics({
          type: this.optionType,
          quertDate: parseTime(this.currentDate)
        }).then(response => {
          myChart.setOption(response.data);
          _this.showLoading = false;
        },error => {
          _this.showLoading = false
        })
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      onChangeSelectType(value) {
        this.init();
      },
      selectConfirm(date) {
        this.$refs.item.toggle();
        this.init();
      },
      selectCancel() {
        this.$refs.item.toggle();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
